<template>
    <view class="sort">
        <view class="flex plr-10 font-size-12 font-w-600 flex-center sortItemCon" @click="targetShow">
            {{ currentName }}  
            <u-icon :class="{ up: show }" class="ml-4" name="arrow-down-fill" size="8" color="#222"></u-icon>
        </view> 
        <!-- <view class="sortFilter" v-if="show">
            <view class="pb-16 plr-16">
                <view
                    class="font-size-14 pt-16 flex flex-ai-center"
                    @click="changeSort(item.key)"
                    :class="item.key == currentType ? 'font-color-textPrimary' : 'font-color-666'"
                    v-for="item in sortType"
                    :key="item.key"
                >
                    {{ item.name }}
                    <w-icon v-if="item.key == currentType" name="checked1" class="ml-4" size="20"></w-icon>
                </view>
            </view>
        </view> -->

        <w-popup-bottom v-model="show" title="排序">
            <view class="sort-con">
                <view v-for="item in sortType" :key="item.key" @click="changeSort(item.key)">
                    <text>{{ item.name }}</text>
                    <w-icon :name="item.key == currentType ? 'check-icon' : 'uncheck-icon'" size="18"></w-icon>
                </view>
            </view>
        </w-popup-bottom>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            show: false,
            currentType: "time",
            height: "100%",
            sortType: [
                {
                    name: "最新上架",
                    key: "time",
                },
                {
                    name: "价格升序",
                    key: "priceAsc",
                },
                {
                    name: "价格降序",
                    key: "pricedDesc",
                },
                {
                    name: "流通量升序",
                    key: "fluxAsc",
                },
                {
                    name: "流通量降序",
                    key: "fluxDesc",
                },
				{
				    name: "成交量升序",
				    key: "saleAsc",
				},
				{
				    name: "成交量降序",
				    key: "saleDesc",
				},
				{
				    name: "涨跌幅升序",
				    key: "zhangfuAsc",
				},
				{
				    name: "涨跌幅降序",
				    key: "zhangfuDesc",
				},
            ],
        };
    },
    computed: {
        currentName() {
            return this.sortType.find((v) => v.key == this.currentType).name;
        },
    },
    mounted() {},
    methods: {
        targetShow() {
            this.show = !this.show;
        },
        changeSort(key = "time") {
            this.currentType = key;
            switch (key) {
                case "time":
                    let list = [...this.list];
                    list.sort((a, b) => {
                        return b.new_time - a.new_time;
                    });
                    this.$emit("sortAfter", list);
                    break;
                case "priceAsc":
                    this.list.sort((a, b) => {
                        let AsortPrice = a.min_price == "--" ? 0 : a.min_price;
                        let BsortPrice = b.min_price == "--" ? 0 : b.min_price;
                        return AsortPrice - BsortPrice;
                    });
                    break;
                case "pricedDesc":
                    this.list.sort((a, b) => {
                        let AsortPrice = a.min_price == "--" ? 0 : a.min_price;
                        let BsortPrice = b.min_price == "--" ? 0 : b.min_price;
                        return BsortPrice - AsortPrice;
                    });
                    break;
                case "fluxAsc":
                    this.list.sort((a, b) => {
                        return a.flux - b.flux;
                    });
                    break;
                case "fluxDesc":
                    this.list.sort((a, b) => {
                        return b.flux - a.flux;
                    });
                    break;
				case "saleAsc":
					this.list.sort((a, b) => {
						return Number(a.all_sale_num) - Number(b.all_sale_num);
					});
					break;
				case "saleDesc":
					this.list.sort((a, b) => {
						return Number(b.all_sale_num) - Number(a.all_sale_num);
					});
					break;
				case "zhangfuAsc":
					this.list.sort((a, b) => {
						return Number(a.scale) - Number(b.scale);
					});
					break;
				case "zhangfuDesc":
					this.list.sort((a, b) => {
						return Number(b.scale) - Number(a.scale);
					});
					break;		
            }
            this.show = false;
			this.$emit("sortCutType", this.currentType);
        },
    },
};
</script>

<style lang="scss">
.sort {
    width: 100%;
    height: 74rpx;
    .sortItemCon {
        width: fit-content;
        height: 52rpx;
		background-color: #F5F5F5;
		color: #222;
		border-radius: 50rpx;
		font-weight: 600;
    }
}

.up {
    transform: rotate(180deg);
}

.current {
    color: #9d1718;
}

.item {
    &::after {
        display: block;
        content: "";
        width: 2rpx;
        height: 20rpx;
        background-color: #cecfd3;
        margin-left: 17rpx;
        margin-right: 17rpx;
    }

    &:last-child {
        &::after {
            display: none;
        }
    }
}

.sort-con {
    width: 100%;
    padding-top: 16rpx;
    border-top: 2rpx solid #eee;
    margin-top: 32rpx;
    > view {
        width: 100%;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;
        font-weight: 500;
    }
}
</style>
